<template>
    <div class="d-flex">
        <div class="app_card  pt-2  mr-3">
            <!-- 权限 -->
            <!-- v-if="authStore.hasCode('SysConfigs.save')" -->
            <div style="width: 73vw;">
                <div class="top-box d-flex justify-content-between align-items-center">
                    <div>
                        <div class="d-flex align-items-center">
                            <img style="cursor: pointer;" src="@/assets/img/tour/back.png" alt="" class="mr-3"
                                @click="router.go(-1)">
                            <span style="font-size: 20px;">2023年9月12日 (周二) 第1节 高数</span>
                        </div>
                        <div class="teacher-info mt-2">
                            <span class="mr-4">老师：{{ "张三老师" }}</span>
                            <span>教室：{{ "YIJ-0124" }}</span>
                        </div>

                    </div>
                    <div class="change-btn d-flex">
                        <div v-for="(item, index) in btnList" @click="currentIndex = index"
                            :class="index === currentIndex ? 'active' : ''">{{ item }}</div>
                    </div>
                </div>
                <AIData v-if="currentIndex == 0"></AIData>

                <RealTimeVideo v-if="currentIndex == 1"></RealTimeVideo>

            </div>
        </div>
        <div class="app_card pt-2 flex-grow-1">
            <!-- <div style="height:calc(100vh - 150px)"></div> -->
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="数据分析" name="first">
                    <div class="pt-2">
                        <img src="../../../assets/img/tour/sandianPic.png" alt="">
                    </div>
                    <div class="pt-2">
                        <img src="../../../assets/img/tour/s-tPic.png" alt="">
                    </div>
                    <div class="pt-2">
                        <img src="../../../assets/img/tour/rt-chPic.png" alt="">
                    </div>
                    <div class="pt-2 mb-4">
                        <img src="../../../assets/img/tour/aiPic.png" alt="">
                    </div>

                </el-tab-pane>
                <el-tab-pane label="课程评分" name="second">
                    <div class="teacher-deg">
                        <div class="d-flex justify-content-between align-items-center">
                            <div style="color: #7c7e98;">老师角度</div>
                            <el-icon style="vertical-align: middle">
                                <CaretBottom />
                            </el-icon>
                        </div>
                        <div class="in-box mt-2">
                            <div>
                                <div style="color:#b9bac7"> 1.注重理想信念和社会主义价值观培养</div>
                                <el-rate v-model="beliefScore" allow-half score-template="{value}"
                                    @mousemove="changeScore(beliefScore)" :max="5" />
                                <span style="position: relative;top: -2px;">{{ beliefScore * 2 }}</span>
                            </div>
                            <div class="mt-4">
                                <div style="color:#b9bac7">2.关爱学生，要求严格</div>
                                <el-rate v-model="beliefScore" allow-half score-template="{value}" :max="5" />
                                <span style="position: relative;top: -2px;">{{ beliefScore * 2 }}</span>
                            </div>
                            <div class="mt-4">
                                <div style="color:#b9bac7"> 3.关爱学生，要求严格</div>
                                <el-rate v-model="beliefScore" allow-half score-template="{value}" :max="5" />
                                <span style="position: relative;top: -2px;">{{ beliefScore * 2 }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="teacher-deg mt-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <div style="color: #7c7e98;">授课角度</div>
                            <el-icon style="vertical-align: middle">
                                <CaretBottom />
                            </el-icon>
                        </div>
                        <div class="in-box mt-2">
                            <div>
                                <div style="color:#b9bac7">4.目标明确，内容有深度广度，理论联系实际，反映学科前沿</div>
                                <el-rate v-model="beliefScore" allow-half score-template="{value}" :max="5" />
                                <span style="position: relative;top: -2px;">{{ beliefScore * 2 }}</span>
                            </div>
                            <div class="mt-2">
                                <div style="color:#b9bac7">5.课件精良，有效应用现代教育技术和手段</div>
                                <el-rate v-model="beliefScore" allow-half score-template="{value}" :max="5" />
                                <span style="position: relative;top: -2px;">{{ beliefScore * 2 }}</span>
                            </div>
                            <div class="mt-2">
                                <div style="color:#b9bac7"> 6.思路清晰，表达精炼，注重启发，深入浅出</div>
                                <el-rate v-model="beliefScore" allow-half score-template="{value}" :max="5" />
                                <span style="position: relative;top: -2px;">{{ beliefScore * 2 }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="teacher-deg mt-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <div style="color: #7c7e98;">学生行为角度</div>
                            <el-icon style="vertical-align: middle">
                                <CaretBottom />
                            </el-icon>
                        </div>
                        <div class="in-box mt-2">
                            <div>
                                <div style="color:#b9bac7"> 1.注重理想信念和社会主义价值观培养</div>
                                <el-rate v-model="beliefScore" allow-half score-template="{value}" :max="5" />
                                <span style="position: relative;top: -2px;">{{ beliefScore * 2 }}</span>
                            </div>
                            <div class="mt-4">
                                <div style="color:#b9bac7">2.关爱学生，要求严格</div>
                                <el-rate v-model="beliefScore" allow-half score-template="{value}" :max="5" />
                                <span style="position: relative;top: -2px;">{{ beliefScore * 2 }}</span>
                            </div>
                            <div class="mt-4">
                                <div style="color:#b9bac7"> 3.关爱学生，要求严格</div>
                                <el-rate v-model="beliefScore" allow-half score-template="{value}" :max="5" />
                                <span style="position: relative;top: -2px;">{{ beliefScore * 2 }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="score-box" v-if="route.query.id == 1">
                        得分 87分
                    </div>
                    <div class="mt-4" v-else style="height: 80px;">
                        <el-button size="large" type="primary">提交</el-button>
                    </div>

                </el-tab-pane>

            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import RealTimeVideo from './components/RealTimeVideo.vue';
import AIData from './components/AIData.vue';
const router = useRouter()
const route = useRoute()
//评分
const beliefScore = ref(4.5)
const currentIndex = ref(0)

const btnList = ref([
    "AI数据", "实时视频",
])

const activeName = ref('first')
const formatTooltip = (val) => {
    return val
}
const changeScore = (val) => {
    console.log(val);
}

onUnmounted(() => {

})
</script>

<style lang="less" scoped>
:deep(.el-tabs__content) {
    height: calc(100vh - 140px);
    overflow: scroll;
    // position: relative;
}

.app_card {
    // height: calc(100vh - 100px);
    // overflow: auto;
}

.teacher-info {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #575b7c;
}

.change-btn {
    width: 160px;
    height: 34px;
    border-radius: 8px;
    background: #191e4a;

    div {
        width: 80px;
        height: 34px;
        border-radius: 8px;
        background: #191e4a;
        text-align: center;
        line-height: 34px;
        cursor: pointer;
    }

    .active {
        background: #00A2CC;
    }


}




.demo-tabs>.el-tabs__content {
    // padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

:deep(.el-tabs__nav-wrap::after) {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0px;
    height: 0px !important;
}

:deep(.el-tabs__item) {
    font-size: 20px !important;
    color: #696c88;

    font-weight: 700;
}

:deep(.el-tabs__item.is-active) {
    color: #fff;
}

:deep(.el-tabs__item:focus) {
    color: #fff;

}

.teacher-deg {
    width: 299px;
    height: 283px;
    background-color: #191d4a;
    border-radius: 10px;
    box-shadow: 0px 4px 16px 1px rgba(0, 0, 0, 0.16);
    padding: 16px;
}

.in-box {
    width: 267px;
    height: 220px;
    background-color: #070c3b;
    padding: 16px;
}

:deep(.el-button--large) {
    font-size: 20px;
    --el-button-size: 52px;
}

:deep(.el-button) {
    width: 94%;
}

.score-box {
    margin-top: 40px;
    text-align: center;
    font-size: 28px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #0DB895;
    height: 80px;
}
</style>